import React, { Component } from "react";
import "./Wenda.less"
import { SubmitApi } from "@/request/api"
import { showYTKAlert, alertDispatchFn } from "@/utils"
import { connect } from 'react-redux'
class Wenda extends Component {
  state = {
    isShowAnswer: false,
    answer: ""
  }
  render() {
    // let timu = this.props.timu;
    let test = this.props.test
    let actionCode = this.props.actionCode
    return (
      <div
        className="wenda"
        style={{ display: test.questionType === "qa" ? "block" : "none" }}
      >
        <div className="timu_title">
          <div className="tag">问答</div>
          <section>{test.title}</section>
        </div>
        {/* <div dangerouslySetInnerHTML={{__html: timu.content || "<div>这是富文本的内容</div>"}}></div> */}
        {/* <div dangerouslySetInnerHTML={{ __html: "<p>这是富文本的内容</p>" }}></div> */}
        <textarea className="timu_textarea" placeholder="请输入答案" onChange={this.textFn.bind(this)}></textarea>
        <p className="timu_tips">此类型的题目暂不支持打分，按正确记分。</p>
        <div className="timu_submit" onClick={this.submitFn.bind(this, test, actionCode)}>确认</div>

        <div className="timu_answer" style={{ display: this.state.isShowAnswer ? "block" : "none" }}>
          <span>答案：</span>
          {/* <p>{test.answer}</p> */}
          <div dangerouslySetInnerHTML={{ __html: test.answer }} style={{ fontSize: '20px' }}></div>
        </div>
        <div className="timu_answer timu_analysis"
          style={{ display: this.state.isShowAnswer ? "block" : "none" }}
        >
          {/* <span>解析：</span>
          <p>{test.analysis}</p> */}
        </div>
      </div>
    );
  }
  textFn(e) {
    // console.log(e);
    this.setState({
      answer: e.target.value
    })
  }
  async submitFn(test, actionCode) {
    if (!this.state.answer.trim()) {
      showYTKAlert(this.props, "warning", "答案不能为空");
      return
    }
    let res = await SubmitApi({
      actionType: "exam_test",
      actionCode,
      id: test.id,
      categoryCode: test.categoryCode,
      userAnswer: this.state.answer
    })
    console.log(res);
    // 给出提示,提交成功
    showYTKAlert(this.props, "success", "提交成功");
    //显示答案
    this.setState({
      isShowAnswer: true
    })
  }
}


const mapDispatchToProps = (dispatch) => {
  return {
    ...alertDispatchFn(dispatch)
  }
}

export default connect(null, mapDispatchToProps)(Wenda)
